<template>
	<z-paging-swiper class="page">
		<city-head></city-head>
		<z-tabs ref="tabsRef" scroll-count="1" :list="tabsList" :current="currentIndex" @change="changeTab"
			value-key="id" :active-style="{'font-size':'36rpx','font-weight':'bold','color': '#333333'}"
			:inactive-style="{'font-size':'28rpx','color': '#666666'}">
			<template slot="right">
				<view class="selectMore uni-flex uni-justify-between uni-align-center" @click="openSelectService">
					<text class="text-group_10">筛选</text>
					<image class="more_img" referrerpolicy="no-referrer" :src="`${$ImgBaseUrl}select_gray.png`" />
				</view>

			</template>
		</z-tabs>
		<swiper class="swiper" :current="currentIndex" @change="onChange" @transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
				<findPeopleItem ref="listItem" :tabIndex="index" :currentIndex="currentIndex" :currentId="currentId" />
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref,
		onMounted
	} from "vue";
	import findPeopleItem from "@/pages/tabBars/findPeople/findPeopleItem.vue";
	import cityHead from "@/components/city-head/index.vue";
	import {
		queryTabList
	} from "@/api/findPeople";
	import CustomNavBar from "@/components/custom-navbar/index.vue";

	const tabs = ref(null);
	const tabsRef = ref(null);
	const state = reactive({
		tabsList: [],
		currentIndex: 0,
		currentId: 1,
	});
	const {
		tabsList,
		currentIndex,
		currentId
	} = toRefs(state);
	const changeTab = (index, id) => {
		console.log('切换');
		currentIndex.value = index;
		currentId.value = id;
	};

	const onChange = e => {
		console.log(e.detail)
		currentIndex.value = e.detail.current;
		console.log(currentId.value);
	};
	//swiper滑动中
	const swiperTransition = e => {
		tabsRef.value.setDx(e.detail.dx);
	};
	//swiper滑动结束
	const swiperAnimationfinish = e => {
		currentIndex.value = e.detail.current;
		tabsRef.value.unlockDx();
	};
	// 如果要通知当前展示的z-paging刷新，请调用此方法
	const reloadCurrentList = () => {
		listItem.value[currentIndex.value]?.reload();
	};

	// 打开服务筛选页
	const openSelectService = () => {
		uni.navigateTo({
			url: "/pages/tabBars/selectService/selectService?eventName=PoepelcategorySelected"
		});
	};
	onMounted(() => {
		queryTabList().then(res => {
			// console.log('res------',res);
			tabsList.value = res.data;
		});
	});
</script>

<style lang="scss" scoped>
	.page {
		.swiper {
			height: 100%;
			background-color: #f5f5f5;
		}
	}

	.selectMore {
		width: 80rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		padding: 0 25rpx;

		.more_img {
			width: 16rpx;
			height: 16rpx;
			margin-top: 6rpx;
		}
	}
</style>